<template>
  <div class="operate-btn-wrap">

    <template v-for="i in btnList">
      <el-button v-if="i==='add'" class="operate_add" type="primary" @click="add">
        <i class="iconfont iconicon_add"></i>
        {{ btnTextObj.add }}
      </el-button>
      <el-button v-if="i==='del'" :disabled="hasSelected ? false : true" class="operate_del" type="info" @click="deletes">
        <i class="iconfont iconicon_trash"></i>
        {{ btnTextObj.del }}
      </el-button>
      <el-button v-if="i==='enable'" :disabled="hasSelected ? false : true" class="operate_enable" type="info" @click="enable">
        <i class="iconfont iconicon_enabled"></i>
        {{ btnTextObj.enable }}
      </el-button>
      <el-button v-if="i==='disable'" :disabled="hasSelected ? false : true" class="operate_disabled" type="info"
        @click="disable">
        <i class="iconfont iconicon_disabled"></i>
        {{ btnTextObj.disable }}
      </el-button>
    </template>
    <el-dialog class="dialog-wrap" title="提示" :visible.sync="dialogVisible" :modal-append-to-body="false" width="500px"
      :show-close="true" top="30vh">
      <span class="content">
        <i class="iconfont iconar-alert"></i>
        <span>此操作将删除该数据，是否继续？</span>
      </span>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" type="info" @click="dialogVisible = false">取 消</el-button>
        <el-button class="submit-btn" type="primary" @click="deletes">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'OperateBtnGroup',
    components: {},
    inheritAttrs: false,
    props: {
      btnText: {
        type: Object,
        default: () => {}
      },
      btnList: {
        type: Array
      }
    },
    data() {
      return {
        visiblePop: false,
        selectIndex: -1,
        dialogVisible: false
      }
    },
    computed: {
      btnAuthObj() {
        return Object.assign({
          add: true,
          del: true,
          enable: true,
          disable: true
        }, this.btnAuth)
      },
      btnTextObj() {
        return Object.assign({
          add: '添加',
          del: '删除',
          enable: '启用',
          disable: '禁用'
        }, this.btnText)
      },
      hasSelected() {
        return this.selectIndex >= 0
      }
    },
    created() {},
    methods: {
      add() {
        this.$emit('add')
      },
      deletes() {
        this.dialogVisible = false
        this.$emit('deletes')
      },
      enable() {
        this.$emit('enable')
      },
      disable() {
        this.$emit('disable')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/variables";
  @import "~@/assets/styles/mixin";

  .operate-btn-wrap {
    height: 32px !important;

    ::v-deep .el-button--info {
      background-color: $operateBtnBack !important;
      border-color: $operateBtnBack !important;
    }

    .el-button--info.is-disabled,
    .el-button--info.is-disabled:hover,
    .el-button--info.is-disabled:focus,
    .el-button--info.is-disabled:active {
      color: #495057 !important;
      background-color: #e3e4e8 !important;
      border-color: #d8d9df !important;
    }

    ::v-deep .el-button--small {
      width: auto;
      height: 32px !important;
      font-size: 13px !important;
      padding: 9px 12px 10px 12px !important;
      border: 0;
      float: left;

      i {
        font-size: 12px !important;
      }
    }

    ::v-deep .dialog-wrap {
      .el-dialog {
        border-radius: 4px;
      }

      .el-dialog__footer {
        padding: 16px;
        display: flex;
        justify-content: flex-end;
        border-radius: 4px 4px 0 0;

        .cancel-btn {
          width: 72px;
          height: 36px;
          padding: 12px 24px;
          background: $operateBtnBack;
          font-size: 13px;
        }

        .submit-btn {
          width: 108px;
          height: 36px;
          padding: 12px 44px;
          background: $btnColor;
          font-size: 13px;
        }
      }

      .el-dialog__body {
        padding: 16px 16px 18px;
      }

      .content {
        .iconar-alert {
          color: #f1b44c;
          font-size: 20px;
          line-height: 20px;
          vertical-align: middle;
          padding-right: 12px;
        }

        span {
          line-height: 20px;
          font-size: 14px;
        }
      }

      ::v-deep .dialog-wrap {
        .el-dialog {
          border-radius: 4px;
        }

        .el-dialog__footer {
          padding: 16px;
          display: flex;
          justify-content: flex-end;
          border-radius: 4px 4px 0 0;

          .cancel-btn {
            width: 72px;
            height: 36px;
            padding: 12px 24px;
            background: $operateBtnBack;
            font-size: 13px;
          }

          .submit-btn {
            width: 108px;
            height: 36px;
            padding: 12px 44px;
            background: $btnColor;
            font-size: 13px;
          }
        }

        .el-dialog__body {
          padding: 16px 16px 18px;
        }

        .content {
          .iconar-alert {
            color: #F1B44C;
            font-size: 20px;
            line-height: 20px;
            vertical-align: middle;
            padding-right: 12px;
          }

          span {
            line-height: 20px;
            font-size: 14px;
          }
        }

      }

    }
  }
</style>
